<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			/*
			 1、初始化阶段：由ReactDOM.render触发----初次渲染
						 1.constructor()
						 2.componentWillMount()
						 3.render()
						 4.compontDidMount====>常用
						 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
			2、更新组件：由组件内部this.setState()或父组件render触发
						1.shouldComponentUpdate()
						2.compontWillUpdate()
						3.render()=====>必须使用的一个
						4.componentDidUpdate()
			3.卸载组件：由ReactDOM.unmountCompontAtNode()触发
						1.compontWillUnmount=====>常用
						一般在这个钩子中做一些收尾的事，例如关闭定时器、取消订阅消息
			 */
			
			
			//创建组件
			class A extends React.Component{
				state = {carName:'奔驰'}
				changeCar = ()=> {
					this.setState({
						carName:'奥拓'
					})
				}
				componentDidMount(){
					console.log('A componentDidMount')
				}
				render(){
					console.log('A render')
					return (
					<div>
						<div>我是A组件</div>
						<button onClick={this.changeCar}>换车</button>
						<B carName={this.state.carName}/>
					</div>
					)
				}
				
			}
			class B extends React.Component{
				componentDidMount(){
					console.log('B componentDidMount')
				}
				// 组件将要接收新的props的钩子
				componentWillReceiveProps(props){
					console.log('B componentWillReceiveProps',props)
				}
				// 控制组件更新的"阀门" 必须返回值
				shouldComponentUpdate(){
					console.log('B shouldComponentUpdate')
					return true
				}
				// 组件将要更新的钩子
				componentWillUpdate(){
					console.log('B componentWillUpdate')
				}
				// 组件更新完毕的钩子
				componentDidUpdate(){
					console.log('B componentDidUpdate')
				}
				render(){
					console.log('B render')
					return (
					<div>
						<div>我是B组件,接收到的车是{this.props.carName}</div>
					</div>
					)
				}
				
			}
			
			

		// 渲染虚拟DOM到页面
		ReactDOM.render(<A/>, document.getElementById('test'))
	</script>

	</body>

</html>
